<template>
  <Upload
    class="pic-uploader"
    v-bind="$attrs"
    :action="$props.action"
    :show-file-list="false"
    :on-change="handleChange"
  >
    <img v-if="imageUrl" :src="imageUrl" class="pic">
    <div v-else class="uploader-icon">
      <i class="el-icon-plus icon" />
      <span>上传照片</span>
    </div>
  </Upload>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Upload } from 'element-ui'

export default defineComponent({
  name: 'BasicUpload',
  components: { Upload },
  props: {
    action: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: null
    }
  },
  emits: ['options-change'],
  setup(props, { emit }) {
    const imageUrl = ref(props.value)

    function handleChange(e) {
      emit('options-change', e)
    }
    return {
      imageUrl,
      handleChange
    }
  }
})
</script>

<style lang="scss">
.uploader-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 104px;
  height: 104px;
  font-size: 14px;
  color: #000000d9;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  .icon {
    font-size: 18px;
    font-weight: 500;
    color: inherit;
  }
}
.uploader-icon:hover {
  border-color: #409eff;
}
.pic {
  display: block;
  width: 104px;
  height: 104px;
}
</style>
